<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>API文档 - 知更开放平台</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            overflow-x: hidden;
        }

        .docs-container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 300px;
            background: #f8f9fa;
            padding: 20px;
            border-right: 1px solid #dee2e6;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
        }

        .content {
            flex: 1;
            padding: 40px;
            margin-left: 300px;
        }

        .doc-title {
            padding: 10px 15px;
            margin: 5px 0;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .doc-title:hover {
            background: #e9ecef;
        }

        .doc-title.active {
            background: #007bff;
            color: white;
        }

        /* Markdown 样式 */
        .markdown-content h1 { font-size: 2.5rem; margin-bottom: 1.5rem; }
        .markdown-content h2 { font-size: 2rem; margin: 2rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #eee; }
        .markdown-content h3 { font-size: 1.5rem; margin: 1.5rem 0 1rem; }
        .markdown-content pre { background: #f8f9fa; padding: 1rem; border-radius: 5px; overflow-x: auto; }
        .markdown-content code { background: #f8f9fa; padding: 0.2rem 0.4rem; border-radius: 3px; }
        .markdown-content table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
        .markdown-content th, .markdown-content td { padding: 0.75rem; border: 1px solid #dee2e6; }
        .markdown-content th { background: #f8f9fa; }
        .markdown-content blockquote { border-left: 4px solid #007bff; padding-left: 1rem; margin: 1rem 0; color: #666; }

        /* 返回首页按钮 */
        .back-home {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }

        /* 加载动画 */
        .loading {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* 添加文档目录树样式 */
        .toc-container {
            position: fixed;
            top: 80px;
            right: 20px;
            width: 250px;
            max-height: calc(100vh - 100px);
            overflow-y: auto;
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 999;
            font-size: 14px;
            transition: all 0.3s ease-in-out;
            transform-origin: top right;
        }

        .toc-container.collapsed {
            width: auto;
            height: 40px;
            overflow: hidden;
            cursor: pointer;
            transform: scale(0.9);
            opacity: 0.8;
            padding: 8px 15px;
            white-space: nowrap;
        }

        .toc-toggle {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            cursor: pointer;
            color: #666;
            margin-bottom: 10px;
        }

        .toggle-text {
            display: none;
            margin-right: 8px;
            font-size: 14px;
        }

        .collapsed .toggle-text {
            display: inline;
        }

        .collapsed .toc-title,
        .collapsed .toc-tree {
            display: none;
        }

        .toc-toggle svg {
            transition: transform 0.3s ease;
        }

        .collapsed .toc-toggle {
            margin: 0;
            justify-content: flex-start;
        }

        .collapsed .toc-toggle svg {
            transform: rotate(180deg);
        }

        .toc-title {
            font-weight: bold;
            margin-bottom: 10px;
            padding-right: 20px;
        }

        .toc-tree {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }

        .toc-tree ul {
            list-style: none;
            padding-left: 15px;
        }

        .toc-item {
            margin: 5px 0;
        }

        .toc-link {
            color: #666;
            text-decoration: none;
            display: block;
            padding: 3px 5px;
            border-radius: 3px;
            transition: all 0.2s ease;
        }

        .toc-link:hover {
            background: #f0f0f0;
            color: #007bff;
        }

        .toc-link.active {
            background: #e7f1ff;
            color: #007bff;
        }

        /* 调整内容区域右边距，为目录树留出空间 */
        .content {
            margin-right: 280px;
        }

        /* 回到顶部按钮样式 */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 40px;
            height: 40px;
            background: #007bff;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }

        .back-to-top:hover {
            background: #0056b3;
            transform: translateY(-3px);
        }

        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top svg {
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <a href="/" class="back-home btn btn-outline-primary">返回首页</a>

    <div class="docs-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <h4 class="mb-4">知更API文档目录</h4>
            {foreach $docs as $doc}
                <div class="doc-title" data-file="{$doc.file}">{$doc.title}</div>
            {/foreach}
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <div class="markdown-content">{$defaultContent|raw}</div>
        </div>
    </div>

    <!-- 加载提示 -->
    <div class="loading">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

    <!-- 添加目录树容器 -->
    <div class="toc-container">
        <div class="toc-toggle">
            <span class="toggle-text">展开目录</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M15 18l-6-6 6-6"/>
            </svg>
        </div>
        <div class="toc-title">文档目录</div>
        <div class="toc-tree"></div>
    </div>

    <div class="back-to-top">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 15l-6-6-6 6"/>
        </svg>
    </div>

    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const titles = document.querySelectorAll('.doc-title');
            const content = document.querySelector('.markdown-content');
            const loading = document.querySelector('.loading');

            // 设置第一个文档为激活状态
            if (titles.length > 0) {
                titles[0].classList.add('active');
            }

            titles.forEach(title => {
                title.addEventListener('click', function() {
                    // 更新激活状态
                    titles.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');

                    // 显示加载动画
                    loading.style.display = 'block';

                    // 加载文档内容
                    fetch(`/docs/get_doc?file=${this.dataset.file}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 200) {
                                content.innerHTML = data.content;
                                // 滚动到顶部
                                window.scrollTo(0, 0);
                            } else {
                                alert(data.message || '加载文档失败');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('加载文档失败');
                        })
                        .finally(() => {
                            loading.style.display = 'none';
                        });
                });
            });

            // 目录树相关功能
            const tocContainer = document.querySelector('.toc-container');
            const tocToggle = document.querySelector('.toc-toggle');
            const tocTree = document.querySelector('.toc-tree');

            // 切换目录显示/隐藏
            tocToggle.addEventListener('click', () => {
                tocContainer.classList.toggle('collapsed');
            });

            // 生成目录树
            function generateTOC() {
                const content = document.querySelector('.markdown-content');
                const headings = content.querySelectorAll('h1, h2, h3, h4');
                const toc = document.createElement('ul');
                toc.className = 'toc-tree';

                headings.forEach((heading, index) => {
                    // 为每个标题添加ID
                    heading.id = `heading-${index}`;

                    const li = document.createElement('li');
                    li.className = 'toc-item';
                    
                    const a = document.createElement('a');
                    a.href = `#${heading.id}`;
                    a.className = 'toc-link';
                    a.textContent = heading.textContent;
                    a.style.paddingLeft = `${(parseInt(heading.tagName[1]) - 1) * 15}px`;

                    li.appendChild(a);
                    toc.appendChild(li);
                });

                tocTree.innerHTML = '';
                tocTree.appendChild(toc);

                // 添加点击事件
                tocTree.querySelectorAll('.toc-link').forEach(link => {
                    link.addEventListener('click', (e) => {
                        e.preventDefault();
                        const targetId = link.getAttribute('href').slice(1);
                        const target = document.getElementById(targetId);
                        if (target) {
                            target.scrollIntoView({ behavior: 'smooth' });
                        }
                    });
                });
            }

            // 监听滚动事件，高亮当前位置的目录项
            function highlightTOC() {
                const headings = document.querySelectorAll('.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4');
                const tocLinks = document.querySelectorAll('.toc-link');

                let currentHeading = null;
                headings.forEach(heading => {
                    const rect = heading.getBoundingClientRect();
                    if (rect.top <= 100) {
                        currentHeading = heading;
                    }
                });

                tocLinks.forEach(link => {
                    link.classList.remove('active');
                    if (currentHeading && link.getAttribute('href') === `#${currentHeading.id}`) {
                        link.classList.add('active');
                    }
                });
            }

            // 在文档内容变化时重新生成目录
            const observer = new MutationObserver(() => {
                generateTOC();
            });

            observer.observe(document.querySelector('.markdown-content'), {
                childList: true,
                subtree: true
            });

            // 初始生成目录
            generateTOC();

            // 添加滚动监听
            window.addEventListener('scroll', () => {
                // 显示/隐藏回到顶部按钮
                if (window.scrollY > 300) {
                    document.querySelector('.back-to-top').classList.add('visible');
                } else {
                    document.querySelector('.back-to-top').classList.remove('visible');
                }

                // 继续执行原有的目录高亮功能
                highlightTOC();
            });

            // 回到顶部点击事件
            document.querySelector('.back-to-top').addEventListener('click', () => {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });

            // 优化目录项点击滚动
            tocTree.querySelectorAll('.toc-link').forEach(link => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    const targetId = link.getAttribute('href').slice(1);
                    const target = document.getElementById(targetId);
                    if (target) {
                        // 使用更平滑的滚动
                        const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - 80;
                        window.scrollTo({
                            top: targetPosition,
                            behavior: 'smooth'
                        });
                    }
                });
            });

            // 初始化
            generateTOC();
        });
    </script>
</body>
</html> 